<script setup lang="ts">
import {getVehiclePositionDeviceList, getVehiclePositionLoginMds} from "@/api/threeJs/threeJsApi";
import {carViewPositioning} from "@/threeJs/vehiclePositioning";

getVehiclePositionDeviceList().then(res => {
  // 直接处理数组（不封装函数）
  const data = res.data.map(item => {
    if (item.hasOwnProperty('offline')) {
      return {
        ...item,
        offline: +item.offline === 0 ? '离线' : +item.offline === 1 ? '在线' : +item.offline
      };
    }
    return item;
  });
  tableData.value = data
})
let tableData = ref([])
const carPos = (row) => {
  window.newThree.carViewPos(row.objectid)
}
// 历史轨迹
const carHistory = (row) => {
  // 打开新窗口或新标签页
  getVehiclePositionLoginMds().then(res => {
    window.open(`http://www.18gps.net/user/playback.html?lang=cn&requestSource=web&custname=&mds=${res.mds}&school_id=${res.login_id}&objectid=${row.objectid}&custid=399b9482-a636-4415-93d2-6ca5723fdb73&mapType=BAIDU&r=51473147`, '_blank');
  })
}
</script>

<template>
  <el-table style=" width: 100%;background-color: transparent" :data="tableData" stripe>
    <el-table-column prop="fullName" label="车辆名"/>
    <el-table-column prop="macid" label="车辆编号"/>
    <el-table-column prop="offline" label="状态" width="100"/>
    <el-table-column label="操作" width="400">
      <template #default="scope">
        <el-button size="small" @click="carPos(scope.row)">
          定位
        </el-button>
        <el-button size="small" @click="carHistory(scope.row)">
          查看历史轨迹
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="less">
:deep(.el-table__fit) {
  background-color: transparent !important;
}

:deep(.el-table__inner-wrapper) {
  background-color: transparent !important;

  * {
    background-color: transparent !important;
    text-align: center;
    color: white;
  }

  *::before {
    background-color: transparent !important;
  }
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
</style>
